<template>
    <CustomTableVue :field-list="useFields().spongDetectionWarningInfoFiield" :table-data="tableData" height="85%" >
       <template #jump="slotProps">
     <div class="text-center" style="font-family:' DIN-Bold';color: rgba(0, 194, 255, 1);">
          定位查看 
   </div>
   </template>
   <template #status="slotProps">
   <div class="status-box">
      <span :class="['status-indicator', statusClass(slotProps.row.status)]"></span>
    <span :class="textColorClass(slotProps.row.status)">{{ statusText(slotProps.row.status) }}</span>
  </div>
   </template>
 </CustomTableVue>
</template>

<script setup lang='ts'>
import  CustomTableVue from '@/components/common/table/CustomTable.vue';
import { useFields } from "@/hook/useFields";
const tableData = ref([
{
   code:'ye12',
   name:'液位检测仪',
   level:'一级预警',
   time:'2023-10-20 18:09:55',
},
{
   code:'ys12',
   name:'雨水收集系统',
   level:'二级预警',
   time:'2023-6-8 12:09:44', 
},{
   code:'ys12',
   name:'液位检测仪',
   level:'三级预警',
   time:'2023-7-9 10:09:44',  
},

{
   code:'yw10',
   name:'液位检测仪',
   level:'一级预警',
   time:'2023-10-9 17:09:5',
},
{
   code:'dxss231',
   name:'地下渗水系统',
   level:'二级预警',
   time:'2023-1-9 18:09:55', 
},{
   code:'znjc31',
   name:'智能监测站',
   level:'三级预警',
   time:'2023-2-29 10:09:44',  
},

]);
interface SlotProps {
  row: {
    status: number;
  };
}

const slotProps = ref<SlotProps>({
  row: {
    status: 0, // 默认值或者初始值
  }
});

const statusText = (status: number) => {
  switch(status) {
    case 0: return '正常';
    case 1: return '报警';
    case 2: return '离线';
    default: return '';
  }
};

const statusClass = (status: number) => {
  switch(status) {
    case 0: return 'yellow';
    case 1: return 'red';
    case 2: return 'orange';
    default: return '';
  }
};

const textColorClass = (status: number) => {
  switch(status) {
    case 0: return 'white-text';
    case 1: return 'red-text';
    case 2: return 'orange-text';
    default: return '';
  }
};
</script>
 
<style scoped lang="less">
.status-box {
  font-family: 'DIN-Bold';
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-indicator {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

.white-text {
  color:#E6FDFF 80%
}

.red-text {
  color: red;
}

.orange-text {
  color: orange;
}
</style>